/**
 * Created by douxin on 22/09/2016.
 */

import React from 'react';
import NavItem from './NavItem';

class NavBar extends React.Component {

    onMenuClick(index) {
        return this.props.onMenuClick(index);
    }

    render() {
        const leftMenus = this.props.menus.map((v, k) => {
            if (v.position === 'left') {
                return (
                    <NavItem id={v.id} name={v.name} selectedMenuIndex={this.props.selectedMenu} onMenuClick={this.onMenuClick.bind(this)} key={v.id}/>
                );
            }
        });

        const rightMenus = this.props.menus.map((v, k) => {
            if (v.position === 'right') {
                return (
                    <NavItem id={v.id} name={v.name} selectedMenuIndex={this.props.selectedMenu} onMenuClick={this.onMenuClick.bind(this)} key={v.id}/>
                );
            }
        });
        return (
            <div>
                <nav className="navbar navbar-inverse navbar-fixed-top navbar-grey-blue">
                    <div className="container">
                        <div className="navbar-header">
                            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <span className="sr-only">Toggle navigation</span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                            </button>
                            <a className="navbar-brand" href="#">订单大屏</a>
                        </div>
                        <div id="navbar" className="collapse navbar-collapse">
                            <ul className="nav navbar-nav">
                                {leftMenus}
                            </ul>
                            <ul className="nav navbar-nav navbar-right">
                                {rightMenus}
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        );
    }

}

NavBar.propTypes = {
    menus: React.PropTypes.array,
    selectedMenu: React.PropTypes.number,
    onMenuClick: React.PropTypes.func
};

export default NavBar;